<template>
    <div class="count">
        <h2>当前求和为:{{ countStore.count }}</h2>
        <select v-model.number="selectNum">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="add">+</button>
        <button @click="sub">-</button>
        {{ countStore.name }}
        {{ name }}
        {{ name1 }}
        {{ count }}
        {{ count1 }}
    </div>
 
  
</template>

<script lang="ts" setup name="Count">
    import { ref,toRefs,toRef } from 'vue'
    import { storeToRefs } from 'pinia';
    import { useCountStore } from '@/store/count';
    
    const countStore = useCountStore()
    //  countStore.count.value 不需要,自动解包了
    console.log(countStore);
    console.log(countStore.count);
    console.log(countStore.name);

    
    const count1 = countStore.count  //失去响应式
    // const {count} = toRefs(countStore) // 所有字段都被转换了
    const name = toRef(countStore,'name') 
    const {count, name:name1} = storeToRefs(countStore) //只关注store中的数据,方法不会包裹

    // const count = ref(0)
    const selectNum = ref(1)
    const add = () => {
        // 方法一 直接改 pinia 的值
        // countStore.count = countStore.count + selectNum.value

        //方法二 
        countStore.$patch({
            count: countStore.count + selectNum.value,
            name: '小明'
        })

        //方法三
        // countStore.increment( selectNum.value);
    }
    const sub = () => {
        countStore.count = countStore.count - selectNum.value
    }
    

</script>

<style scoped>
    .count {
        background-color: skyblue;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 0 10px;
    }

    select{
        width: 100px;
        margin-right: 10px;
    }
    button{
        width: 50px;
        height: 30px;
        background-color: #fff;
        margin: 5px;
    }

</style>